<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<style lang="scss" scoped>
.img-card2 {
  position: relative;
  padding: 0.5 1;
  border-right: 2;
  overflow: hidden;
}
.img-card2 .scan-contain {
  position: absolute;
  left: 0;
  right: 0;
  top: -100px;
  height: 100px;
  background: linear-gradient(rgba(98, 119, 60, 0), rgba(98, 119, 60, 0.7));
}
.img-card2 .scan-contain.active {
  animation: moveScan 1.5s infinite;
}

  @keyframes moveScan {
    from {
      top: -100px;
    }
    to {
      top: 100%;
    }
  }

</style>
<style>
	.img-card .img-box {
      width: 213px;
      height: 213px;
      overflow: hidden;
      border: 0.1rem dotted #FFF;
    }
    .img-box .img {
    	position: relative;
    	top: 0px;
    }
    .img-card .active {
        border: 0.1rem solid rgba(0, 255, 51, 0.2);
    }
    .img-box .scan-line {
      height: calc(100% - 2px);
      width: 100%;
      position: absolute;
      top: 0;
      z-index: 99;
      background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
      border-bottom: 3px solid #00ff33;
      transform: translateY(-100%);
    }
	.img-box .activeL {
	  animation: radar-beam 2s infinite alternate;
	  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
	  animation-delay: 1.4s;
    }

    .img-card .active:after,
    .img-card .active:before,
    .img-box .activeA:after,
    .img-box .activeA:before {
      content: '';
      display: block;
      position: absolute;
      width: 3vw;
      height: 3vw;
      border: 0.2rem solid transparent;
    }

    .img-card .active:after,
    .img-card .active:before {
      top: 0;
      border-top-color: #00ff33;
    }

    .img-box .activeA:after,
    .img-box .activeA:before {
      bottom: 0;
      border-bottom-color: #00ff33;
    }

    .img-card .active:before,
    .img-box .activeA:before {
      left: 0;
      border-left-color: #00ff33;
    }

    .img-card .active:after,
    .img-box .activeA:after {
      right: 0;
      border-right-color: #00ff33;
    }

  .qr-scanner {
      background-image:
        linear-gradient(0deg,
          transparent 24%,
          rgba(32, 255, 77, 0.1) 25%,
          rgba(32, 255, 77, 0.1) 26%,
          transparent 27%,
          transparent 74%,
          rgba(32, 255, 77, 0.1) 75%,
          rgba(32, 255, 77, 0.1) 76%,
          transparent 77%,
          transparent),
        linear-gradient(90deg,
          transparent 24%,
          rgba(32, 255, 77, 0.1) 25%,
          rgba(32, 255, 77, 0.1) 26%,
          transparent 27%,
          transparent 74%,
          rgba(32, 255, 77, 0.1) 75%,
          rgba(32, 255, 77, 0.1) 76%,
          transparent 77%,
          transparent);
      background-size: 3rem 3rem;
      background-position: -1rem -1rem;
      width: 100%;
      height: 100vh;
      position: relative;
      background-color: #1110;
    }
    .qr-scanner .box {
      width: 213px;
      height: 213px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      border: 0.1rem solid rgba(0, 255, 51, 0.2);
      /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
    }

    .qr-scanner .line {
      height: calc(100% - 2px);
      width: 100%;
      background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
      border-bottom: 3px solid #00ff33;
      transform: translateY(-100%);
      animation: radar-beam 2s infinite alternate;
      animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
      animation-delay: 1.4s;
    }

    .qr-scanner .box:after,
    .qr-scanner .box:before,
    .qr-scanner .angle:after,
    .qr-scanner .angle:before {
      content: '';
      display: block;
      position: absolute;
      width: 3vw;
      height: 3vw;

      border: 0.2rem solid transparent;
    }

    .qr-scanner .box:after,
    .qr-scanner .box:before {
      top: 0;
      border-top-color: #00ff33;
    }

    .qr-scanner .angle:after,
    .qr-scanner .angle:before {
      bottom: 0;
      border-bottom-color: #00ff33;
    }

    .qr-scanner .box:before,
    .qr-scanner .angle:before {
      left: 0;
      border-left-color: #00ff33;
    }

    .qr-scanner .box:after,
     .qr-scanner .angle:after {
      right: 0;
      border-right-color: #00ff33;
    }

    @keyframes radar-beam {
      0% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(0);
      }
    }

</style>
	<script src="/js/vue.min.js" th:src="@{/js/vue.min.js}"></script>
<title>Insert title here</title>
</head>
<body>
	<p th:text="${hello}">hello</p>
	<div id="app" >
		<button @click="scanningStatus=true">scanStart</button><button @click="scanningStatus=false">scanStop</button>
		<div class="img-card2">
			<div :class="['scan-contain', { active: scanningStatus }]"></div>
			<img :src="imageUrl" class="img" />
		</div>

		<div class="login">
			<h1>动态效果</h1>
			<div class="lightline"></div>
			<ol>
				<li v-for="(item, index) in indoorParams" :key="index">
					<div class="animate-border">
						<i></i>
						<i></i>
					</div>
				</li>
			</ol>
		</div>


	<div class="img-card">
		<div :class="['img-box', { active: scanningStatus }]" :style="{backgroundImage1:`url(${imageUrl})`}">
			<img :src="imageUrl" class="img" />
			<div :class="['scan-line', { activeL: scanningStatus }]"></div>
			<div :class="['scan-angle', { activeA: scanningStatus }]"></div>
		</div>
	</div>
		<div style="height: 100vh;">
			<div class="qr-scanner">
				<div class="box">
					<div class="line"></div>
					<div class="angle"></div>
				</div>
			</div>
		</div>

	</div>
<script th:inline="javascript">
/*<![CDATA[*/
const ctx = /*[[@{/}]]*/ '\/lphone\/';
/*]]>*/
</script>
<script type="text/javascript">
 /*<![CDATA[*/
    new Vue({
        el: '#app',
        data() {
            return {
            	scanningStatus: true,
            	imageUrl : ctx+'img/select_mobile_sample.png'
            }
        },
        methods: {
			scanStart: function (e) {
				this.imageUrl = ctx+'img/select_mobile_sample.png';
				this.scanningStatus = true;
				console.log(this.scanningStatus);
			}
        }
    });
  /*]]>*/
</script>
</body>
</html>